<script lang="ts" setup>
  import {reactive, ref, shallowRef} from "vue";
  import hi from "./components/hi.vue";
  import Test from './components/Test.vue';
  import Test2 from './components/Test2.vue';
  import Test3 from './components/Test3.vue';
  import Test4 from './components/Test4.vue';
  import UserInput from './components/UserInput.vue';
  import jssx from './components/计算属性.vue'
  import watch from './components/watch.vue'
  import VCommand from './components/VueCommand.vue';
  import VCommand2 from './components/VueCommand2.vue';
  import VCommand3 from './components/VueCommand3.vue';
  import life from './components/生命周期.vue';
  import MySlot from './components/slot.vue';
  import shopTemp from './components/shopTemp.vue';
  import event from './components/event.vue';
  import newList from './components/newList.vue';
  import shop from "./components/shop.vue";
  import router from "./components/router.vue";
  // export default {
  //   name:"App",
  //   components:{
  //     Test,Test2,Test3,Test4,UserInput,jssx,watch,VCommand,life,MySlot,shopTemp,event,VCommand2,VCommand3,newList
  //   }
  // }
  const curComponent = shallowRef(router);
</script>

<template>
  <!-- <Test />
  <hr>
  <Test2 /> -->
  <!-- <hr>
  <Test3 />
  <hr>
  <Test4 /> -->

  <!-- 父子组件 -->
  <!-- <hr> -->
  <!-- <MyInput /> -->
   <!-- <UserInput />
   <hr> -->


   <!-- <jssx />
   <hr>
   <watch /> -->
   <!-- <hr> -->
    <!-- <VCommand />
    <hr>
    <life />
    <hr> -->
    <!-- <shopTemp />
    <hr>
    <MySlot /> -->
    <!-- <hr> -->
    <!-- <event />
    <hr> -->
    <!-- <VCommand2 /> -->
    <!-- <hr> -->
    <!-- <VCommand3 /> -->
    <div class="main">
      <button @click="curComponent=Test">Vue插值表达式</button>
      <button @click="curComponent=Test2">Vue初识指令</button>
      <button @click="curComponent=jssx">Vue计算属性</button>
      <button @click="curComponent=watch">Vue-Watch监视</button>
      <button @click="curComponent=VCommand">Vue指令</button><br>
      <button @click="curComponent=life">Vue生命周期</button>
      <button @click="curComponent=MySlot">Vue插槽</button>
      <button @click="curComponent=event">Vue事件</button>
      <button @click="curComponent=VCommand2">自定义指令-全局</button>
      <button @click="curComponent=VCommand3">自定义指令-局部</button><br>
      <button @click="curComponent=newList">newList</button>
      <button @click="curComponent=shop">Shoping</button>
      <button @click="curComponent=router">ShopRouter</button>
      <br><br>
    </div>
    
    <hr><br>
    <KeepAlive include="Vcommand3">
        <component :is="curComponent"></component>
    </KeepAlive>
    
</template>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.main{
  text-align: center;
  width: 700px;
  margin: auto;
}
  button{
    padding: 0%;
    width: 120px;
    height: 40px;
    margin-left: 10px;
    margin-top: 10px;
  }
</style>